<template>
  <div class="nav-header-wrap" @mouseleave="handleNavHeader(false)" @mouseenter="handleNavHeader(true)">
    <div class="nav-header">
      <img src="@/assets/img/logo.png" alt="上海精智" class="cursor logo" @click="$router.push('/')">
      </img>
      <div class="flex">
        <div class="flex-jsc nav-list">
          <!--  @mouseenter="handlehover(index)"
            @mouseleave="handleLeave(index)" -->
          <div v-for="(item, index) in navList" :key="index" class="nav-item">
            <span>{{ item }}</span>
            <arrowIcon @click.stop="toggleDropdown(index)" :color="customColor" class="arrow-icon" v-if="index == 0" />
          </div>
        </div>
        <div class="login" @click="$router.push('/login')">登录</div>
      </div>
    </div>
    <div class="dropdown-menu" v-if="dropdownVisible">
      <FadeInSection animation="fade-down">
        <div class="card-container">
          <div class="card-wrap">
            <div class="desc">智能生产解决方案</div>
            <div class="flex-wrap card-list">
              <div class="card" @click="$router.push('/aps')">
                <img src="@/assets/img/drop/blue1.png" alt="图标1" class="card-icon" />
                <div class="card-title">机器加工生产APS</div>
              </div>
              <div class="card" @click="$router.push('/aps')">
                <img src="@/assets/img/drop/blue2.png" alt="图标2" class="card-icon" />
                <div class="card-title">非标准APS</div>
              </div>
              <div class="card" @click="$router.push('/aps')">
                <img src="@/assets/img/drop/blue3.png" alt="图标3" class="card-icon" />
                <div class="card-title">塑胶量产APS</div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/blue4.png" alt="图标4" class="card-icon" />
                <div class="card-title">缺陷监测系统</div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/blue5.png" alt="图标5" class="card-icon" />
                <div class="card-title">智能报价系统</div>
              </div>
              <div class="card" @click="$router.push('/aps')">
                <img src="@/assets/img/drop/blue6.png" alt="图标5" class="card-icon" />
                <div class="card-title">精智制造GPT</div>
              </div>
              <div class="card" @click="$router.push('/aps')">
                <img src="@/assets/img/drop/blue7.png" alt="图标5" class="card-icon" />
                <div class="card-title">智慧安防</div>
              </div>
            </div>
          </div>
          <div class="card-wrap">
            <div class="desc">智能物流解决方案</div>
            <div class="flex-wrap card-list">
              <div class="card" @click="$router.push('/ips')">
                <img src="@/assets/img/drop/purple1.png" alt="图标1" class="card-icon" />
                <div class="card-title">整车智能规划系统IPS</div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/purple2.png" alt="图标2" class="card-icon" />
                <div class="card-title">库存优化系统 </div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/purple3.png" alt="图标3" class="card-icon" />
                <div class="card-title">智能装载系统</div>
              </div>
            </div>
          </div>
          <div class="card-wrap">
            <div class="desc">智能制造解决方案</div>
            <div class="flex-wrap card-list">
              <div class="card">
                <img src="@/assets/img/drop/yellow1.png" alt="图标1" class="card-icon" />
                <div class="card-title">图纸查询</div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/yellow2.png" alt="图标2" class="card-icon" />
                <div class="card-title">图纸框图替换 </div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/yellow3.png" alt="图标3" class="card-icon" />
                <div class="card-title">智能报价 </div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/yellow4.png" alt="图标4" class="card-icon" />
                <div class="card-title">专家知识库</div>
              </div>
            </div>
          </div>
          <div class="card-wrap">
            <div class="desc">AI盒子解决方案</div>
            <div class="flex-wrap card-list">
              <div class="card">
                <img src="@/assets/img/drop/green1.png" alt="图标1" class="card-icon" />
                <div class="card-title">单据识别</div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/green2.png" alt="图标2" class="card-icon" />
                <div class="card-title">合同比对</div>
              </div>
              <div class="card">
                <img src="@/assets/img/drop/green3.png" alt="图标3" class="card-icon" />
                <div class="card-title">AI查数</div>
              </div>
            </div>
          </div>
        </div>
      </FadeInSection>
    </div>
  </div>
</template>
<script setup>
import FadeInSection from '@/components/FadeInSection.vue';
import whiteLogo from '@/assets/img/logo.png';
import arrowIcon from './icons/arrow-icon.vue';
import grayLogo from '@/assets/img/gray-logo.png';
import { ref } from "vue"
let navList = [
  "方案",
  "案例",
  "咨询",
  "关于我们"
]
const customColor = ref("#fff")
let dropdownVisible = ref(false);

const handleNavHeader = (show) => {
  if (show == false) {
    dropdownVisible.value = false
  }
  const navHeaderWrap = document.querySelector('.nav-header-wrap');
  const logo = document.querySelector('.logo');
  const navItems = document.querySelectorAll('.nav-item span');
  if (show || window.scrollY > 100) {
    navHeaderWrap.style.background = '#fff'; // 白色背景
    navHeaderWrap.style.color = '#000'; // 白色背景
    navHeaderWrap.style.boxShadow = "0px 16px 20px  rgba(0, 0, 0, 0.1)"
    logo.src = grayLogo// 修改logo为灰色
    customColor.value = "#000"
  } else {
    navHeaderWrap.style.background = 'transparent';
    navHeaderWrap.style.boxShadow = "none"
    logo.src = whiteLogo; // 恢复logo
    navHeaderWrap.style.color = '#fff'; // 白色背景
    customColor.value = "#fff"
  }
}

const toggleDropdown = (index) => {
  dropdownVisible.value = 0 === index && !dropdownVisible.value ? true : false;  // 切换菜单的显示状态
}

window.addEventListener('scroll', (event) => handleNavHeader(false))
</script>

<style scoped lang="less">
.nav-header-wrap {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 57px;
  z-index: 5;
  transition: all 0.3s ease;

  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    width: 62%;
    font-size: 16px;
    font-weight: 500;

    .logo {
      width: 130px;
      height: 34px;
    }

    .nav-list {
      width: 430px;

      &>div {
        cursor: pointer;
        font-weight: 500;
        display: flex;
        align-items: center;
        position: relative;

        .arrow-icon {
          font-size: 15px;
          margin-left: 3px;
          width: 15px;
          height: 15px;
        }

        /* 为每个导航项添加下划线效果 */
        &:hover {
          // color: #0096FF;

          /* 鼠标悬停时文字颜色变蓝 */
          & span {
            font-weight: bold;
          }
        }

        /* 鼠标悬停时，使用伪元素添加蓝色下划线 */
        &:hover::after {
          content: '';
          /* 伪元素 */
          position: absolute;
          bottom: -19px;
          left: 0;
          width: 100%;
          height: 3px;
          border-radius: 3px;
          /* 下划线的高度 */
          background-color: #0096FF;
          /* 下划线颜色 */
          transform: scaleX(0);
          /* 初始宽度为 0 */
          transition: transform 0.3s ease;
          /* 让下划线的出现有动画效果 */
        }

        /* 伪元素的动画效果：悬停时，宽度从 0 到 100% */
        &:hover::after {
          transform: scaleX(1);
        }
      }
    }

    .login {
      width: 76px;
      height: 34px;
      border-radius: 4px;
      background: linear-gradient(90deg, rgba(0, 110, 255, 1) 0%, rgba(0, 159, 255, 1) 100%);
      font-size: 16px;
      line-height: 34px;
      color: #fff;
      text-align: center;
      margin-left: 65px;
      cursor: pointer;
      user-select: none;
    }
  }

  .dropdown-menu {
    position: fixed;
    top: 57px;
    left: 0;
    width: 100%;
    height: 80vh;
    background-color: #fff;
    // border: 1px solid #ddd;
    box-shadow: 0px 20px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: all 0.3s ease;
    padding: 10px;

    .card-container {
      width: 63%;
      margin: 0 auto;
      font-size: 14px;
      color: #2B3441;

      .card-wrap {
        width: 100%;
      }

      .desc {
        padding: 22px 0;
        border-bottom: 1px solid #EBEBEB;
      }

      .card-list {
        // gap: 50px;
        margin-top: 10px;
        width: 100%;

        .card {
          display: flex;
          align-items: center;
          width: 20%;
          margin-bottom: 10px;
          padding: 10px;
          cursor: pointer;

          &:hover {
            background: #fef6f0;
            border-radius: 8px;
            color: #fb9337;
          }

          img {
            width: 20px;
            height: 20px;
            margin-right: 13px;
          }
        }
      }
    }
  }


}
</style>
